<template>
	<view class="pages">
		<view class="pages_title">
			{{$t('index.Welcome')}} !
		</view>
		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>
					<!-- First Name -->
					{{$t('register1.fristname')}}
					</span>
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.firstname"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>
		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>
					<!-- Last Name -->
					{{$t('register1.LastName')}}
					</span>
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.lastname"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>

		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>
					{{$t('register1.Phone')}}
				</span>
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.mobile"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>
		<view class="items" @click="dateshow = true">
			<view class="itemsTip">
				<span>*</span>
				<span>{{$t('Dateofbirth')}}</span>

			</view>
			<view class="sd b">
				<span>{{FormData.birth ? FormData.birth : this.$t('Pleaseselectthedateofbirth')}}</span>
				<view class="icon">
					<u-icon name="arrow-down" v-if="dateshow == false"></u-icon>
					<u-icon name="arrow-up" v-else></u-icon>
				</view>
			</view>
			<u-datetime-picker :show="dateshow" :minDate="-631152000000" v-model="date" @confirm="dateconfirm" mode="date" :confirmText="$t('Confirm')" :cancelText="$t('Cancel')" @cancel="dateshow = false" :formatter="formatter"></u-datetime-picker>
		</view>

		<view class="items" @click="Countriesshow = true">
			<view class="itemsTip">
				<span>*</span> 
				<span>{{$t('Countries')}}</span>

			</view>
			<view class="sd b">
				<span>{{FormData.country ? FormData.country : this.$t('Pleaseselectacountry')}}</span>
				<view class="icon">
					<u-icon name="arrow-down" v-if="Countriesshow == false"></u-icon>
					<u-icon name="arrow-up" v-else></u-icon>
				</view>
			</view>
			<u-picker :show="Countriesshow" :columns="Countriescolumns" keyName="label" :confirmText="$t('Confirm')" :cancelText="$t('Cancel')"
			@cancel="Countriesshow = false" @confirm="CountriesConfirm"></u-picker>
		</view>
		
		
		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>{{$t('Profile.Address')}}</span>
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.address"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>
		
		
		<view class="items">
			<view class="itemsTip">
				<span></span>
				<!-- <span>Address 2 or APT#</span> --> 
				<span>{{$t('Address2')}}</span>
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.address2"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>
		
		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>{{$t('City')}}</span> 
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.city"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>

		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>{{$t('State')}}</span>
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.state"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>
		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>{{$t('Zipcode')}}</span>
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.post_code"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>
		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>{{$t('newEmail.Email')}}</span>

			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.email"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>
		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>{{$t('Password1')}}</span>
				
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.password_hash"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>

		<view class="items">
			<view class="itemsTip">
				<span>*</span>
				<span>{{$t('SponsorID')}}</span>
			</view>
			<view class="sd">
				<u--input :placeholder="$t('register1.placeholder')" border="surround" v-model="FormData.pid"
					:customStyle="{width:'650rpx',height:'49rpx'}" :disabled="pidDisabled"></u--input>
			</view>
		</view>
		<u-button type="primary" :text="$t('SignUpNow')"
			:customStyle="{width:'100%',height:'80rpx',backgroundColor:'#273562',color:'#fff',margin:'30rpx auto 0rpx',fontWeight:'700',border:'none'}"
			@click="submit"></u-button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				newUrl:1,//0为新接口1为老接口
				FormData: {
					address: "",
					address2: "",
					birth: "",
					check_code: "",
					city: "",
					country: "",
					email: "",
					firstname: "",
					lastname: "",
					mobile: "",
					password_hash: "",
					pid: "",
					post_code: "",
					state: ""
				},
				ConfirmPassword: '',
				dateshow: false,
				Countriesshow: false,
				date: '',
				Countriescolumns: [
					[{
						label: 'US',
						// 其他属性值
						id: 0
						// ...
					}, {
						label: 'CANADA',
						id: 1
					}]
				],
				pidDisabled:false
			}
		},
		onLoad(opions) {
			if(opions.code) {
				this.FormData.pid = opions.code
				this.pidDisabled = true
			}
		},
		methods: {
			// 提交数据
			submit() {
				if (!this.FormData.firstname) {
					this.$ToastFail(this.$t('FirstNameisrequired'))
					return 
				}
				
				if (!this.FormData.lastname) {
					this.$ToastFail(this.$t('LastNameisrequired’'))
					return 
				}
				
				if (!this.FormData.mobile) {
					this.$ToastFail(this.$t('Phoneisrequire'))
					return 
				}
				
				if (!this.FormData.birth) {
					this.$ToastFail(this.$t('Pleaseselectthedateofbirth'))
					return 
				}
				
				if (!this.FormData.country) {
					this.$ToastFail(this.$t('Pleaseselectacountry'))
					return 
				}
				
				if (!this.FormData.address) {
					this.$ToastFail(this.$t('addressisrequired'))
					return 
				}
				// if (!this.FormData.address2) {
				// 	this.$ToastFail(this.$t('Aaddress2sss'))
				// 	return
				// }
				if (!this.FormData.city) {
					this.$ToastFail(this.$t('Cityisrequired'))
					return 
				}
				
				if (!this.FormData.state) {
					this.$ToastFail(this.$t('AddNewPolicy.State.tips'))
					return 
				}
				
				if (!this.FormData.email) {
					this.$ToastFail(this.$t('Emailisrequired'))
					return 
				}
				if (!this.FormData.password_hash) {
					this.$ToastFail(this.$t('Passwordisrequired’'))
					return 
				}
				
				if (!this.FormData.pid) {
					this.$ToastFail(this.$t('SponsorIDisrequired'))
					return 
				}
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$post(`/backend/login/register`, this.FormData,this.newUrl).then(res => {
					if(res.status) {
						this.$ToastOk(`${res.data.msg}`)
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/index/login/login' 
							})
						},1000)
					} else {
						this.$ToastFail(`${res.message}`)    
					}
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}`
				}
				if (type === 'month') {
					return `${value}`
				}
				if (type === 'day') {
					return `${value}`
				}
				return value
			},
			// 选择出生年月日
			dateconfirm(e) {
				// var timterspd = new Date("1950-01-01").getTime();
				// console.log(timterspd,'111111111111111111111');
				let date = new Date(e.value)
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				this.FormData.birth = `${year}-${month}-${day}`
				this.dateshow = false
			},
			// 选择国家
			CountriesConfirm(e) {
				this.FormData.country = e.value[0].label
				this.Countriesshow = false
			}

		}
	}
</script>

<style>
	.pages {
		padding: 0 40rpx 80rpx;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.pages_title {
		font-family: Roboto;
		font-size: 24px;
		font-weight: 500;
		line-height: 24px;
		letter-spacing: 0em;
		text-align: left;
		/* margin-top: 40rpx; */
		margin: 40rpx 0 108rpx;
	}

	.pages_tips {
		font-family: Roboto;
		font-size: 18px;
		font-weight: 500;
		line-height: 22px;
		letter-spacing: 0em;
		text-align: left;
		margin-top: 168rpx;
	}

	.items {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 160rpx;
		margin: 2rpx auto 0;
		/* padding: 0 36rpx; */
		box-sizing: border-box;
	}

	.itemsTip {
		display: flex;
		align-items: center;
		height: 54rpx;
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 40rpx;
		letter-spacing: 0em;
		text-align: left;

	}

	.itemsTip span:first-child {
		color: red;
		/* padding-top: 5rpx; */
		line-height: 5rpx;
		margin-right: 6rpx;
		padding-top: 8rpx;
	}

	.sd {
		display: flex;
		/* justify-content: flex-start; */
		align-items: center;
		width: 100%;
		height: 80rpx;
		/* background-color: red; */
		border-radius: 10rpx;
	}

	.b {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0em;
		text-align: left;
		border: 2rpx solid #ccc;
		height: 74rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
</style>